import Link from "next/link";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { formatDate } from "@/lib/utils";

export default function KnowledgeBasesPage() {
  // 模拟知识库数据
  const knowledgeBases = [
    {
      id: "kb-1",
      name: "研究资料",
      description: "包含各种研究论文和资料",
      documentCount: 12,
      lastUpdated: new Date("2024-03-18T10:05:00"),
    },
    {
      id: "kb-2",
      name: "产品文档",
      description: "产品规格和用户手册",
      documentCount: 5,
      lastUpdated: new Date("2024-03-16T09:15:00"),
    },
    {
      id: "kb-3",
      name: "法律文件",
      description: "合同和法律文档",
      documentCount: 0,
      lastUpdated: new Date("2024-03-14T15:45:00"),
    },
  ];

  return (
    <div className="container mx-auto py-6">
      <div className="mb-6 flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
            知识库
          </h1>
          <p className="text-sm text-gray-500 dark:text-gray-400">
            管理您的知识库和文档
          </p>
        </div>
        <Link href="/knowledge-bases/new">
          <Button>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              className="mr-2 h-4 w-4"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              strokeWidth={2}
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M12 4v16m8-8H4"
              />
            </svg>
            创建知识库
          </Button>
        </Link>
      </div>

      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {knowledgeBases.map((kb) => (
          <Card key={kb.id} className="transition-shadow hover:shadow-md">
            <CardHeader>
              <CardTitle>{kb.name}</CardTitle>
              <CardDescription>{kb.description}</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="text-sm text-gray-500 dark:text-gray-400">
                <div className="mb-1">
                  <span className="font-medium">{kb.documentCount}</span> 个文档
                </div>
                <div>
                  最后更新: {formatDate(kb.lastUpdated)}
                </div>
              </div>
            </CardContent>
            <CardFooter className="flex justify-between">
              <Link href={`/knowledge-bases/${kb.id}`}>
                <Button variant="outline" size="sm">
                  查看详情
                </Button>
              </Link>
              <Link href={`/chat/new?knowledgeBaseId=${kb.id}`}>
                <Button variant="secondary" size="sm">
                  开始对话
                </Button>
              </Link>
            </CardFooter>
          </Card>
        ))}

        <Link href="/knowledge-bases/new" className="block">
          <Card className="flex h-full flex-col items-center justify-center border-dashed p-6 transition-shadow hover:shadow-md">
            <div className="mb-2 rounded-full bg-gray-100 p-2 dark:bg-gray-800">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                className="h-6 w-6 text-gray-600 dark:text-gray-400"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                strokeWidth={2}
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  d="M12 4v16m8-8H4"
                />
              </svg>
            </div>
            <p className="text-center text-sm font-medium text-gray-900 dark:text-white">
              创建新知识库
            </p>
            <p className="mt-1 text-center text-xs text-gray-500 dark:text-gray-400">
              添加新的知识库并上传文档
            </p>
          </Card>
        </Link>
      </div>
    </div>
  );
} 